<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue7-25</title>
</head>
<body>
	<!-- <component>元素用来动态挂载不同组件，使用is特性选择要挂载的组件 -->
	<div id="app">
		<component :is="currentView"></component>
		<button @click="handleChangeView('A')">切换到A</button>
		<button @click="handleChangeView('B')">切换到B</button>
		<button @click="handleChangeView('C')">切换到C</button>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
	<script>

		var app = new Vue({
			el:'#app',
		components:{
			comA:{template:'<div>组件A</div>'},
			comB:{template:'<div>组件B</div>'},
			comC:{template:'<div>组件C</div>'}
		},
		data:{
			currentView:'comA'
		},
		methods:{
			handleChangeView:function(com){
				this.currentView = 'com' + com
			}
		}
		})
	</script>
</body>
</html>